<template>
  <div class="app-container">
    <el-form ref="filterForm" :model="list.filter" inline>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>

      <el-form-item prop="hotelId">
        <el-select
          v-model="list.filter.hotelId"
          placeholder="所属酒店"
          style="width: 100%"
          clearable
          filterable
        >
          <el-option
            v-for="item in options.hotelList"
            :key="item.hotelId"
            :label="item.hotelName"
            :value="item.hotelId"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="roomTypeName">
        <el-input
          v-model.trim="list.filter.roomTypeName"
          placeholder="所属房型"
          clearable
        >
        </el-input>
      </el-form-item>

      <el-form-item prop="roomName">
        <el-input
          v-model.trim="list.filter.roomName"
          placeholder="产品名称"
          clearable
        >
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          @click="
            () => {
              $refs.filterForm.resetFields();
            }
          "
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <auth-button name="新增" @click="c()" />
        <!-- <auth-button
          @click="exportExcel()"
          :loading="exportListLoading"
          :disabled="!(list.data && list.data.length > 0)"
          name="导出"
        /> -->
        <ExportExcel
          url="/sot-admin-api/hotel/self-room-info/export"
          :disabled="!(list.data && list.data.length > 0)"
          :param="list.filter"
        />
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index" />
      <el-table-column label="产品名称" prop="roomName" />
      <el-table-column label="早餐数量" prop="breakfastNum" />
      <el-table-column label="最大入住人数" prop="capacity" />
      <el-table-column label="预订条款">
        <template slot-scope="{ row }">
          {{row.latestBookingDays?`提前${row.latestBookingDays}天`:`当天预订`}}
        </template>
      </el-table-column>
      <el-table-column label="入住条款">
        <template slot-scope="{ row }">
          <span v-if="row.sheckinType == undefined">无</span>
          <template v-else>
            <span>{{row.sheckinType=='0'?'连住':'限住'}}</span>
            <span>{{row.serialSheckin}}天</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="预订间数">
        <template slot-scope="{ row }">
           <span v-if="row.roomCountMin != undefined">{{`至少${row.roomCountMin}间`}}</span>
            <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="取消条款">
        <template slot-scope="{ row }">
          <span v-if="row.cancelType != undefined">{{cancelTypeMap[row.cancelType]}}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="所属房型" prop="roomTypeName" />
      <el-table-column label="所属酒店" prop="hotelName" />
      <el-table-column label="所属商户" prop="merchantName" />
      <el-table-column
        label="操作"
        class-name="small-padding"
        align="center"
        width="320"
      >
        <template slot-scope="{ row }">
          <auth-button @click="r({ id: row.roomId })" name="查看" />
          <auth-button @click="u({ id: row.roomId })" name="编辑" />
          <auth-button
            circle
            name="查看日历"
            @click="handleBtnCalendar(row, 'r')"
          >
            <i class="el-icon-date"></i>
          </auth-button>
          <auth-button
            circle
            name="编辑日历"
            type="primary"
            @click="handleBtnCalendar(row, 'u')"
          >
            <i class="el-icon-date"></i>
          </auth-button>

          <auth-button name="删除" @click="d({ id: row.roomId })" />
          <auth-button
            name="查看条款"
            circle
            @click="handleBtnTermsSetting(row, 'r')"
          >
            <i class="el-icon-setting"></i>
          </auth-button>
          <auth-button
            name="编辑条款"
            circle
            type="primary"
            @click="handleBtnTermsSetting(row, 'u')"
          >
            <i class="el-icon-setting"></i>
          </auth-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情弹框(查看、编辑、删除) -->
    <detailDialog
      :form.sync="form"
      :submitForm="submitForm"
      ref="detailDialogRef"
    >
    </detailDialog>

    <!-- 日历弹框 -->
    <calendarDialog :form="calendarTarget" @change="getList()">
    </calendarDialog>

    <!-- 条款设置弹框 -->
    <termsSettingDialog
      :form="termsSettingTarget"
      @change="getList()"
    >
    </termsSettingDialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import detailDialog from "./components/detail";
import calendarDialog from "./components/calendar";
import termsSettingDialog from "./components/termsSetting";

export default {
  computed: {
    ...mapGetters(["areaTree", "userInfo"]),
  },
  mixins: [pageMixin],
  components: {
    detailDialog,
    calendarDialog,
    termsSettingDialog,
  },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/hotel/self-room-info',
    list: {
      filter: {
        areaCode: null,
        hotelId: null,
        roomTypeName: null,
        roomName: null,
      },
    },
  }, {
    getElFormRefOfFormData() {
      return this.$refs.detailDialogRef?.$refs.formRef?.$refs.elForm
    },
  }),
  data() {
    return {
      exportListLoading: false,
      // 日历价格弹框对象
      calendarTarget: {
        show: false,
        query: null,
        data: null,
        loading: false,
        status: null,
      },
      // 批量价格设置弹框
      batchPriceTarget: {
        show: false,
        data: null,
      },
      // 单日价格设置弹框
      singlePriceTarget: {
        show: false,
        data: null,
      },
      // 条款设置弹框
      termsSettingTarget: {
        show: false,
        data: null,
        status: null,
      },
      cancelTypeMap:{
        0:'入住前免费取消',
        1:'一经预订不可更改或取消',
        2:'入住前条件取消',
      },
      options: {
        hotelList: null,
      },
    };
  },
  watch: {
    "list.filter.areaCode": {
      handler(nv, ov) {
        if ((nv && !ov) || (!nv && ov)) this.queryHotel(nv);
      },
      immediate: false,
      deep: true,
    },
  },
  created() {
    this.queryHotel();
  },
  methods: {
    // /**
    //  * 点击导出
    //  * @return Void
    //  */
    // exportExcel() {
    //   if (this.exportListLoading) {
    //     return false;
    //   }
    //   this.exportListLoading = true;
    //   this.$POST.download("sot-admin-api/hotel/self-room-info/export", this.list.filter, {
    //     method: "POST",
    //   }).finally((e) => {
    //     this.exportListLoading = false;
    //   });
    // },
    /**
     * 点击日历按钮
     * @param {Object} row
     * @return Void
     */
    handleBtnCalendar(row, status) {
      this.calendarTarget.query = row;
      this.calendarTarget.show = true;
      this.calendarTarget.status = status;
    },
    /**
     * 点击条款设置按钮
     * @param {Object} row
     * @return Void
     */
    handleBtnTermsSetting(row, status) {
      this.termsSettingTarget.data = row;
      this.termsSettingTarget.show = true;
      this.termsSettingTarget.status = status;
    },
    queryHotel(val) {
      this.$POST("sot-admin-api/hotel/self-employed/queryForList", {
        areaCode: val, // 区(标准编码)
        merchantId: null,
        // status : 1, // 1正常,0为禁用
        reviewStatus: 3, // 审核通过
      })
        .then(({ data }) => { 
          if (data && data.length > 0) {
            this.$set(this.options, "hotelList", data);
          } else {
            this.$set(this.options, "hotelList", []);
          }
        })
        .finally((e) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
